<template>
<div>
{{tt}}

<el-row>

	<el-form :inline="true" :model="form" >
		
	    <el-form-item >
		    <el-input v-model="form.name" placeholder="产品名称"></el-input>
		</el-form-item>

		<el-form-item >
		    <el-input v-model="form.code" placeholder="产品编号"></el-input>
		</el-form-item>

		<!-- <el-form-item>
		    <el-button type="primary" >查询</el-button>
		</el-form-item> -->

    </el-form>
</el-row>

<el-row>

</el-row>

<el-row>
<el-table
    :data="productList.results"
    border
    style="width: 100%">
    <el-table-column
      prop="code"
      label="产品编号"
      width="150">
    </el-table-column>

    <el-table-column
      prop="name"
      label="产品名称"
      >
    </el-table-column>

    <el-table-column
      prop="guide_price"
      label="价格(起)"
      width="100"
      >
    </el-table-column>

    <el-table-column
      label="排序"
      width="150"
      >
      	<template slot-scope="scope">
      		<el-input placeholder="请输入内容" v-model="scope.row.asort" size="mini">
			    <el-button slot="append"
			    @click.native="asort(scope.row)"
			    >排序</el-button>
			</el-input>
      	</template>
    </el-table-column>
    
    <el-table-column
      label="操作"
      width="360"
      >
      <template slot-scope="scope">
      	<!-- <el-button-group> -->
        <el-button  v-if="scope.row.myproduct != '1'"
        type="primary" size="mini" @click="editProduct(scope.row)">管理</el-button>
        <el-button  
        type="warning" size="mini" @click="commission(scope.row)">佣金</el-button>

        <el-button  
        type="info" size="mini" @click="setting(scope.row)">设置</el-button>

        <el-button 
        v-if="scope.row.state == '1' && scope.row.myproduct != '1'"
        type="success" size="mini" @click="release(scope.row)">发布</el-button>
        <el-button 
        v-if="scope.row.state == '2'"
        type="success" size="mini" @click="up(scope.row)">上架</el-button>
        <el-button 
        v-if="scope.row.state == '1'"
        type="danger" size="mini" @click="down(scope.row)">下架</el-button>

      	<el-button 
        v-if="scope.row.state == '2'"
        type="danger" size="mini" @click="deleteProduct(scope.row)">删除</el-button>
        <!-- </el-button-group> -->
      </template>
    </el-table-column>
</el-table>
</el-row>

<el-row class="text-right mt20 mb20">
	<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="productList.totalRecord">
    </el-pagination>
</el-row>



<el-dialog title="设置佣金" width="70%" :visible.sync="commissionTableVisible">
	<div v-if="commissionLoading" class="text-center">
		<div class="el-icon-loading"></div>
		<p>加载中</p>
	</div>
	<template v-if="!commissionLoading"
	v-for="attr in commissionTableData"
	>
		<template v-if="attr.state == '1'">
		<div class="mt20 mb10">
		型号：{{attr.attr_name}} , 成本：{{attr.cost_price}} , 售价：{{attr.guide_price}}
		</div>
		<el-table border
		 :data="attr.levelarr">
		    <el-table-column 
		    property="title" label="体系名称" width="250"></el-table-column>
		    <el-table-column label="一级佣金" width="100">
		    	<template slot-scope="scope">
		    		<el-input v-model="scope.row.profit" size="small"></el-input>
		    	</template>
		    </el-table-column>
		    <el-table-column label="二级佣金" width="100">
		    	<template slot-scope="scope">
		    		<el-input v-model="scope.row.profit1" size="small"></el-input>
		    	</template>
		    </el-table-column>

		    <el-table-column label="是否允许分销" width="200">
		    	<template slot-scope="scope">
		    		<el-switch
					  v-model="scope.row.state"
					  active-color="#13ce66"
					  inactive-color="#ff4949"
					  active-text="允许"
					  inactive-text="禁止"
					  active-value="1"
					  inactive-value="0"
					  >
					</el-switch>
		    	</template>
		    </el-table-column>

		    <el-table-column label="操作" >
		      <template slot-scope="scope">
		        <el-button type="primary" size="small" @click="saveCommission(scope.row, attr)" >保存</el-button>
		      </template>
		    </el-table-column>
		</el-table>
		</template>
	</template>
  
</el-dialog>


<el-dialog
  title="设置"
  :visible.sync="settingVisible"
  width="40%">
  <el-form label-width="100px">

	<el-form-item label="类别：" >
		<el-select v-model="productObj.type_code" filterable >
		    <el-option
		      v-for="item in tlist"
		      :label="item.type_name"
		      :value="item.type_code">
		    </el-option>
		</el-select>

		<el-button @click="saveType">设置</el-button>

	</el-form-item>


	<el-form-item label="栏目：" >
		<el-select v-model="productObj.column_code" filterable >
		    <el-option
		      v-for="item in clist"
		      :label="item.column_name"
		      :value="item.column_code">
		    </el-option>
		</el-select>

		<el-button @click="saveColumn">设置</el-button>
	</el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="settingVisible = false">取 消</el-button>
    <!-- <el-button type="primary" @click="">保存</el-button> -->
  </span>
</el-dialog>


</div>
</template>

<script>

import { mapGetters } from 'vuex';
import * as api  from '../../../service/api';

export default {
	name: 'productlist_list',
		data () {
		return {
		  	form : {
				name : '',
				code : '',
			},
			pageNo : 1,
			pageSize : 10,
			totalRecord : 0,
			totalPage : 0,

			loading : true,

			s : this.state,

			commissionTableVisible : false,
			commissionTableData : [],
			commissionProductCode : '',
			commissionLoading : true,
			commissionProduct : {},

			productList : {},

			settingVisible : false,

			productObj : {},
		}
	},

	props: {
	  	state : Number,
	  	count : Number,
	  	refresh : Number,	//刷新用的。
	  	tlist : Array,
	  	clist : Array,
	},

	components: {
		
	},

	computed : {
		...mapGetters([
			'productInSale',
			'productInWarehouse',
		]),

		tt () {
			// console.log('tt');
			console.log(this.refresh);
			this.getProductList();
			return '';
		},

		

	},

	methods : {
		getProductList () {
			console.log(this.refresh);
			var para = {
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				state : this.s,
				code : this.form.code,
				name : this.form.name,
				cb : (res) => {
					//console.log(res);
					this.$emit('update:count', res.totalRecord);
					this.productList = res;
				},
			}
			this.$store.dispatch('getProductList', para);
		},


		handleClick () {

		},

	    editProduct (item) {
	    	this.$router.push({
	    		'name' : 'productDetail',
	    		'params' : {
	    			'id' : item.id,
	    		}
	    	});
	    },

	    handleSizeChange (val) {
			this.pageSize = val;
		},

		handleCurrentChange (val) {
			this.pageNo = val;
		},

		commission (item) {
			console.log(item);
			
			this.commissionTableVisible = true;
			this.commissionLoading = true;



			this._getProductCommission(item);
		},


		_getProductCommission (item) {

			this.commissionTableData = [];
			this.commissionProductCode = '';

			let para = {
				product_code : item.code,
				attrlist : item.attrlist,
				cb : res => {
					console.log('_getProductCommission');
					console.log(res);
					this.commissionTableData = res;
					this.commissionProductCode = item.code;
					this.commissionProduct = item;
					this.commissionLoading = false;
				}
			};
			console.log('para');
			console.log(para);
			this.$store.dispatch('getProductCommission', para);
		},


		saveCommission (item, attr) {
			console.log(item);
			console.log(this.commissionTableData);

			let para = {
				id : item.id,
				attr_id : attr.attr_id,
				level_code : item.code,
				code : this.commissionProductCode,
				profit : item.profit,
				profit1 : item.profit1,
				profit2 : item.profit2,
				state : item.state,
				cb : res => {
					this.$notify({
			          title: '成功',
			          message: '保存成功',
			          type: 'success'
			        });
			        this._getProductCommission(this.commissionProduct);
				},
				err : res => {
					this.$notify({
			          title: '保存失败',
			          message: res,
			          type: 'error'
			        });
			        this._getProductCommission(this.commissionProduct);
				}
			};

			this.$store.dispatch('updateProductCommission', para);
		},


		up (item) {

			const para = {
				fun : 'updateProduct_up',
				id : item.id,
				sale_code : item.sale_code,
				state : '1',
				cb : res => {
					this.$emit('reload');
					this.$notify({
			          title: '成功',
			          message: '上架成功',
			          type: 'success'
			        });
				},
				err : res => {
					this.$notify({
			          title: '上架失败',
			          message: res,
			          type: 'error'
			        });
				}
			}

			this.$store.dispatch('update', para);
		},

		down (item) {
			let para = {
				id : item.id,
				sale_code : item.sale_code,
				state : '2',
				cb : res => {
					this.$emit('reload');
					this.$notify({
			          title: '成功',
			          message: '下架成功',
			          type: 'success'
			        });
				},
				err : res => {
					this.$notify({
			          title: '下架失败',
			          message: res,
			          type: 'error'
			        });
				}
			};

			this.$store.dispatch('updateProduct_updown', para);
		},

		release (item) {
			let para = {
				id : item.id,
				fun : 'releaseProduct',
				cb : res => {
					this.$notify({
			          title: '成功',
			          message: '发布成功',
			          type: 'success'
			        });
				},
				err : res => {
					this.$notify({
			          title: '发布失败',
			          message: res,
			          type: 'error'
			        });
				}
			};

			this.$store.dispatch('update', para);

		},


		deleteProduct (item) {
			this.$confirm('此操作将永久删除该产品, 是否继续?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {
	          	let para = {
					id : item.id,
					fun : 'deleteProduct',
					cb : res => {
						this.getProductList();
						this.$notify({
				          title: '成功',
				          message: '删除成功',
				          type: 'success'
				        });
					},
					err : res => {
						this.$notify({
				          title: '删除失败',
				          message: res,
				          type: 'error'
				        });
					}
				};

				this.$store.dispatch('update', para);

	        }).catch(() => {
	                    
	        });

			
		}, 


		asort (item) {

			console.log(item);

			var para = {
				id : item.id,
				sale_code : item.sale_code,
				asort : item.asort,
				cb : res => {
					this.getProductList();
					this.$notify({
			          title: '成功',
			          message: '修改成功',
			          type: 'success'
			        });
				},
				err : res => {
					this.$notify({
			          title: '修改失败',
			          message: res,
			          type: 'error'
			        });
				}
			};

			console.log(para);

			this.$store.dispatch('updateProduct_asort', para);

		},


		//设置栏目和型号
		setting (item) {

			this.settingVisible = true;

			this.productObj = item;
		},


		saveType () {
			const para = {
				fun : 'updateProduct',
				id : this.productObj.id,
				sale_code : this.productObj.sale_code,
				type_code : this.productObj.type_code,
				cb : res => {
					this.$notify({
			          title: '成功',
			          message: '保存成功',
			          type: 'success'
			        });
				},
				err : res => {
					this.$notify({
			          title: '保存失败',
			          message: res,
			          type: 'error'
			        });
				}
			};

			this.$store.dispatch('update', para);
		},

		saveColumn () {
			const para = {
				fun : 'updateProduct',
				id : this.productObj.id,
				sale_code : this.productObj.sale_code,
				column_code : this.productObj.column_code,
				cb : res => {
					this.$notify({
			          title: '成功',
			          message: '保存成功',
			          type: 'success'
			        });
				},
				err : res => {
					this.$notify({
			          title: '保存失败',
			          message: res,
			          type: 'error'
			        });
				}
			};

			this.$store.dispatch('update', para);
		},

	},

	watch:{
	    
	},

	mounted () {
		//this.getProductList();
		
	},

}
</script>

<style>
  .el-table .danger-row {
    background: #F56C6C;
    color:#fff;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
